<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/common/taglibs.jsp"%>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags"%>


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>菜单管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="${ctxLayui}/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="${ctxLayui}/layuiadmin/style/admin.css" media="all">
    <link rel="stylesheet" href="${ctxLayui}/layuiadmin/style/myStyle.css" media="all">
</head>
<body>

<div class="layui-card layadmin-header">
    <div class="layui-breadcrumb" lay-filter="breadcrumb">
        <a lay-href="">系统管理</a>
        <a><cite>菜单管理</cite></a>
    </div>
</div>

<div class="layui-fluid">
    <div class="layui-card">

        <!--<div class="layui-card-header">用户列表</div>-->
        <div class="layui-card-body">

            <div id="sysMenuListTable-toolbar-div" style="display: none;">
                <div class="layui-btn-container"  style="margin:10px 0 5px 10px;">
                    <button class="layui-btn layui-btn-sm" data-type="addRec">添加</button>
                </div>
            </div>


            <table class="layui-hide"  id="sysMenuListTable" lay-filter="sysMenuListTable"></table>

            <script type="text/html" id="sysMenuListTable-bar">
                <a class="layui-btn layui-btn-xs" lay-event="editRec">编辑</a>
                <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="delRec">删除</a>
            </script>
        </div>
    </div>
</div>

<script src="${ctxLayui}/layuiadmin/layui/layui.js"></script>
<script>
    layui.config({
        base: '${ctxLayui}/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'table','dict','treeTable'], function(){
        var $ = layui.$
            ,table = layui.table
            ,form = layui.form;
        var dict = layui.dict;

        var treeTable = layui.treeTable;
        var admin = layui.admin;


        var tplType = function(d){
            var html = dict.showName("menuType",d.type);
            return html;
        };

        var tplStatus = function(d){
            var html = dict.showName("status",d.status);
            return html;
        };




        // 渲染表格
        var insTb = treeTable.render({
            elem: '#sysMenuListTable',
            tree: {
                iconIndex: 1,  // 折叠图标显示在第几列
                idName: 'id',  // 自定义id字段的名称
                pidName: 'parentId',  // 自定义标识是否还有子节点的字段名称
            },
            cols: [
                {type: 'checkbox', fixed: 'left'},
                {type: 'numbers',width: 120,style:'text-align:left'},
                {field: 'id', title: 'ID',width: 180},
                {field: 'title', title: '名称', width: 180},
                {field: 'perms', title: '按钮权限', width: 180},
                {field: 'path', title: '路径'},
                {field: 'type', title: '菜单类型', width: 100,templet:tplType},
                {field: 'sortOrder', title: '排序', width: 100},
                {field: 'status', title: '状态', width: 100,templet:tplStatus},
                {title:'操作', toolbar: '#sysMenuListTable-bar', width:180}
            ],
            reqData: function(data, callback) {
                // 在这里写ajax请求，通过callback方法回调数据
                var url = ctx+'/system/sysMenu/sysMenuTreeList';
                var rtn = admin.syncReq(url,{});
                var rtnData = rtn.data;
                for(var i=0;i<rtnData.length;i++){
                    var vo = rtnData[i];
                    vo.open = true;
                }
                callback(rtnData);
            }
        });

        var active = {
            addRec: function(parentId){
                parentId = parentId?parentId:0;
                var nodes = insTb.checkStatus(false);
                if(nodes.length>=1 && parentId==0){
                    parentId = nodes[0].id;
                }
                window.formData = {};
                window.formData.parentId = parentId
                layer.open({
                    type: 2
                    ,title: '菜单信息'
                    ,content: 'sysMenuForm.jsp'
                    ,maxmin: true
                    ,area: layui.setter.area
                    ,btn: ['确定', '取消']
                    ,yes: function(index, layero){
                        var iframeWindow = window['layui-layer-iframe'+ index]
                            ,submit = layero.find('iframe').contents().find("#layuiadmin-app-form-submit");

                        //监听提交
                        iframeWindow.layui.form.on('submit(layuiadmin-app-form-submit)', function(data){
                            var field = data.field; //获取提交的字段

                            var url=ctx+"/system/sysMenu/add";
                            var rtn = admin.syncReq(url,field);
                            if(rtn.code==0){
                                active.reload();
                                form.render();
                                layer.close(index);
                            }
                        });
                        submit.trigger('click');
                    }
                });
            },
            editRec:function(obj){
                var rec = obj.data;
                window.formData = null;
                layer.open({
                    type: 2
                    ,title: '菜单信息'
                    ,content: 'sysMenuForm.jsp?id='+ rec.id
                    ,maxmin: true
                    ,area: ['800px', '600px']
                    ,btn: ['确定', '取消']
                    ,success:function(layero,index){
                        var body = layer.getChildFrame('body', index);//获取弹出层的dom元素
                        var data = obj.data;
                        window.formData = data;
                        $.each(data,function(item){
                            body.find("[name="+item+"]").val(data[item]);
                        });
                    }
                    ,yes: function(index, layero){
                        var iframeWindow = window['layui-layer-iframe'+ index]
                            ,submit = layero.find('iframe').contents().find("#layuiadmin-app-form-edit");

                        //监听提交
                        iframeWindow.layui.form.on('submit(layuiadmin-app-form-edit)', function(data){
                            var field = data.field; //获取提交的字段

                            //提交 Ajax 成功后，静态更新表格中的数据
                            //$.ajax({});
                            field.id = rec.id;
                            $.ajax({
                                url:ctx+"/system/sysMenu/modify",    //请求的url地址
                                dataType:"json",   //返回格式为json
                                async:true,//请求是否异步，默认为异步，这也是ajax重要特性
                                data:field,    //参数值
                                type:"POST",   //请求方式
                                cache:false,
                                beforeSend:function(xml){
                                },
                                success:function(response,status){
                                    active.reload();
                                    form.render();
                                    layer.close(index);
                                },
                                complete:function(xml,status){
                                    //请求完成的处理
                                },
                                error:function(xml,status,err){
                                    //请求出错处理
                                }
                            });
                        });

                        submit.trigger('click');
                    }
                });
            },
            delRec:function (obj) {
                var rec = obj.data;
                insTb.removeAllChecked();  // 移除全部选中
                insTb.setChecked([rec.id]);
                var nodes = insTb.checkStatus(false);
                layer.confirm('确定删除记录及其子节点?', function(index){
                    var idArr = [];
                    for(var i=0;i<nodes.length;i++){
                        idArr.push(nodes[i].id);
                    }
                    var rtn = admin.syncReq(ctx+"/system/sysMenu/deleteByBatch",{"ids":idArr.join(",")});
                    if(rtn.code==0){
                        active.reload();
                        layer.close(index);
                    }
                });
            },
            reload: function(){
                //执行重载
                insTb.reload();
                active.showBtn();
            },
            showBtn:function () {
                $(".ew-tree-table-head .layui-table").html($("#sysMenuListTable-toolbar-div").html());
                $('.layui-btn-container .layui-btn').on('click', function(){
                    var type = $(this).data('type');
                    active[type] ? active[type].call(this) : '';
                });
            }
        };

        active.showBtn();

        //监听行工具事件
        treeTable.on('tool(sysMenuListTable)', function(obj){
            var data = obj.data;
            if(obj.event === 'editRec'){
                active.editRec(obj);
            }else if(obj.event==='delRec'){
                active.delRec(obj);
            }
        });

    });
</script>
</body>
</html>